<template>
  <view class="page-body">
	  <u-navbar :is-back="false" title="订单列表"
	    title-size="30"
	    :background="{background:'#2B88FE' }"
	    title-color="#fff">
	    <div class="head_icon">
	      <u-icon @click="$api.handleBackTo"
	        name="arrow-left" color="#fff"
	        size="36">
	      </u-icon>
	      <u-icon @click="$api.handleHomeTo"
	        name="home" color="#fff" size="36">
	      </u-icon>
	    </div>
	  </u-navbar>
	  
<u-sticky style="height: 110upx;"
	    bg-color="#fff">
	    <view class="client-head">
	      <view class="lf el-flex">
	        <!-- <u-icon @click.native="clearAreaMarket"
	          size="30" name="reload">
	        </u-icon> -->
	        <div class="boxFlex"
	          @click="areaShow=!areaShow">
	          <span
	            class="title">{{areaText}}</span>
	          <u-icon name="arrow-right"
	            color="#999">
	          </u-icon>
	        </div>
	        <div class="areaDialog" v-if="areaShow">
	          <view class="area-list">
	            <view class="li"
	              v-for="(item,index) in Areavalue"
	              :key="index">
	              <view class="cell"
	                @click="allShow(index)">
	                全部</view>
	              <view
	                @click="setArea(index,v.fId)"
	                :class="{'active':v.fId===formActive[index]}"
	                class="cell"
	                v-for="(v,i) in item" :key="i">
	                {{v.fNm}}({{v.fMc}})
	              </view>
	            </view>
	          </view>
	          <u-button type="primary"
	            @click="areaConfirm">确定
	          </u-button>
	        </div>
	      </view>
	      <u-search v-model="info.value.Key"
	        @change="changeSearch">
	      </u-search>
	    </view>
	  </u-sticky>  	  
	  
    <u-tabs :list="list" class="" :is-scroll="false" active-color="#1677FF" inactive-color="#666666"
      :current="info.value.OrderStatus" @change="change">
    </u-tabs>
    <view class="u-skeleton" style="height: 16rpx;">
    </view>
    <u-empty text="暂无数据" mode="list" v-if="!clist.length">
    </u-empty>
    <view class="u-skeleton-fillet" @click="toDetail(li)" v-for="(li,index) in clist" :key="index">
      <orlist class="" :item='li'>
        <view slot="right">
          
          <view :class="li.fStatus==10?'yi':'wei'">
            {{$api.getOrderStatus(li.fStatus)}}
          </view>

        </view>
	
		
        <u-button
          @click="$api.navigator(`/pages/sale/order_detail?id=${li.fId}&taskId=${li.fTaskId}&status=order`)"
          slot="button" type="primary" size="medium"> 查看详情 </u-button>
      </orlist>
	  
	  <view class="slot-content">
	    <u-table>
	      <u-tr class="u-tr">
	        <u-th class="u-th" width="30%">商品名称</u-th>
	        <u-th class="u-th" width="15%">单位</u-th>
	        <u-th class="u-th" width="15%">数量</u-th>
	        <u-th class="u-th">单价</u-th>
	        <u-th class="u-th">金额</u-th>
	      </u-tr>
	      <u-tr class="u-tr" v-for="(item,i) in li.OrderProList" :key="i">
	        <u-td class="u-td" width="30%">{{item.fProName}}</u-td>
	        <u-td class="u-td" width="15%">{{item.fUnit}}</u-td>
	        <u-td class="u-td" width="15%">{{item.fCount}}</u-td>
	        <u-td class="u-td">{{item.fPrice}}</u-td>
	        <u-td class="u-td">{{item.fMoney}}</u-td>
	      </u-tr>
	    </u-table>
	  </view>
    </view>
  </view>
</template>

<script>
import { orderStatus } from '@/util/setting'
import orlist from '../../components/orlist'
export default {
  components: {
    orlist
  },
  onShareAppMessage() {},
  data() {
    return {
      list: Object.values(orderStatus).map(x => ({ name: x })),
      current: 0,
      clist: [],
      isAllList: 1,
      page: 1,
      status: 'loading',
      loading: true,
      keywords: '',
	  fClassId:0,
	  areaText: '全部',
	  Areavalue: [],
	  AreavalueData: [],
	  areaShow: false,
      info: {
        PageSize: 10,
        PageIndex: 1,
        value: {
          MrkId: 0,
		   ClassAreaId: 0,
          OrderStatus: 0,
          OrderType: 1,
          Key: ''
        }
      },
	  formActive: {
	    0: '',
	    1: '',
	    2: ''
	  }
    }
  },
  onReachBottom() {
    if (this.isAllList != 0) {
      this.info.PageIndex += 1
      this.getList()
    }
  },
  onShow() {
    const switchId = uni.getStorageSync('switchId')
    if (switchId) {
      this.info.value.OrderStatus = Number(switchId)
    }
    uni.setNavigationBarTitle({
      title: '我的订单'
    })
	
	this.$axios('api/BusClassArea/GetSClassList', 'post', { value: 0 }).then(res => {
	  let info = res.Value[0]
	  this.Areavalue = this.getarea(res.Value, info.fId)
	  this.AreavalueData = this.getParentNodes(res.Value)
	  setTimeout(() => {
	    this.setArea(0, info.fId)
	  }, 100)
	})
	
	 this.defaultData(() => {
	   this.getList()
	 })
  },
  methods: {
    toDetail(e) {
      this.$api.navigator('order_detail?orderid=' + e.id)
    },
    change(e) {
      this.info.value.OrderStatus = e
	  this.defaultData(() => {
	    this.getList()
	  })
    },
    defaultData(callback) {
      this.isAllList = 1
      this.page = 10
      this.status = 'loading'
      this.loading = true
	  this.info.PageIndex = 1
	  this.clist = []
	  
	    callback && callback()
    },
    getList() {
      let that = this
      this.$axios('api/OrderBasic/ListUserPaged', 'post', this.info).then(res => {
        if (!res.Value.List.length) this.isAllList = 0
        res.Value.List.forEach(x => {
          x.img = this.urlimg + x.fPic
          x.id = x.fMrkId
          x.name = x.fMrkName
        })
        that.loading = false
        that.clist.push(...res.Value.List)
      })
    },
	
	allShow(idx) {
	  if (idx === 0) {
	    this.clearAreaMarket()
	  } else {
	    this.fClassId = this.formActive[idx - 1]
	    this.areaConfirm()
	  }
	},
	areaConfirm() {
	  const info = this.getIdData(this.fClassId)
	  this.areaText = info.fNm
	  this.info.value.ClassAreaId = info.fId
	  this.defaultData(() => {
	    this.areaShow = false
	    this.getList()
	  })
	},
	getParentNodes(list) {
	  let max = Math.max.apply(
	    this,
	    list.map(x => x.fL)
	  )
	  let arr = []
	  for (let index = 1; index <= max; index++) {
	    arr.push(list.filter(x => x.fL == index))
	  }
	  return arr
	},
	getarea(list) {
	  let arr = this.getParentNodes(list)
	    // .map(x => x.map(x => x.fClassName))
	    .filter(x => x.length)
	  // arr.forEach((v, i) => {
	  //   if (i > 0) v = []
	  // })
	  return arr
	},
	getParentId(id) {
	  return this.AreavalueData.flat().filter(x => x.fPId == id)
	},
	getIdData(id) {
	  // let { column, value } = e.detail
	  // let c = this.Areavalue[column][value]
	  const arr = this.AreavalueData.flat()
	  let info = arr.find(x => x.fId === id)
	  return info
	},
	getNameData(name) {
	  // let { column, value } = e.detail
	  // let c = this.Areavalue[column][value]
	  const arr = this.AreavalueData.flat()
	  let info = arr.find(x => x.fNm === name)
	  return info
	},
	setArea(column, fClassId) {
	  let col = column + 1
	  let child = this.getParentId(fClassId)
	  this.fClassId = fClassId
	  this.formActive[column] = fClassId
	  if (child.length) {
	    this.$set(this.Areavalue, col, child)
	    this.setArea(col, child[0].fId)
	  } else {
	    this.Areavalue = this.Areavalue.slice(0, col)
	  }
	},
	changeSearch() {
	  var that = this
	  this.defaultData(function () {
	    that.getList()
	  })
	},
	
	ChangeArea(e) {
	  let info = this.getinfo(e)
	  this.setArea(e.detail.column, info.fId)
	},
	clearAreaMarket() {
	  this.areaText = '请选择超市区域'
	  this.info.value.ClassAreaId = 0
	  this.defaultData(() => {
	    // this.$refs.uDropdown.close()
	    this.areaShow = false
	    this.getList()
	  })
	},
	
  }
}
</script>

<style lang="scss">
.clist {
  margin-bottom: 16rpx;
  background-color: #ffffff;

  .top {
    padding: 34rpx 32rpx;
    box-sizing: border-box;

    .code {
      font-size: 32rpx;
      font-weight: 500;
      color: #34404a;
    }

    .state {
      font-size: 30rpx;
      font-weight: 400;
      color: #2b88fe;
    }
  }

  .info {
    padding: 32rpx 32rpx 16rpx 32rpx;
    box-sizing: border-box;

    .itxt {
      padding-bottom: 16rpx;
      font-size: 28rpx;
      font-weight: 400;
      color: #34404a;
      line-height: 40rpx;
    }

    .photoShowIcon {
      width: 64rpx;
      height: 64rpx;
    }
  }

  .store {
    padding: 24rpx 32rpx;
    box-sizing: border-box;

    .simg {
      width: 56rpx;
      height: 56rpx;
      margin-right: 24rpx;
      background-color: #f2f2f2;
      border-radius: 10rpx;
    }

    .sname {
      font-size: 28rpx;
      font-weight: 500;
      color: #333333;
      line-height: 36rpx;
      padding: 0 20rpx 0 0;
    }

    .pay {
      width: 144rpx;
      height: 64rpx;
      line-height: 64rpx;
      text-align: center;
      font-size: 28rpx;
      font-weight: 400;
      color: #1677ff;
      border-radius: 32rpx;
      border: 1rpx solid #2b88fe;
    }
  }
}


.client-head {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 15rpx;
  background: #fff;
  z-index: 1100;

  .lf {
    font-size: 24rpx;
    margin-right: 15rpx;

    .title {
      margin: 0 10rpx;
    }
  }
  u-search {
    width: 65vw;
  }
}

.areaDialog {
  position: absolute;
  left: 0;
  top: 190rpx;
  width: 100%;
  z-index: 1000;
}
.area-list {
  display: flex;
  background-color: #fff;
  .li {
    padding: 10rpx;
    height: 80vh;
    overflow: auto;
    flex-grow: 1;
    .cell {
      padding: 10rpx;
    }
    // .cell:hover {
    //   background-color: #eee;
    // }
  }
  .li:not(:first-child) {
    border-left: 1px solid #eee;
  }
  .active {
    background-color: #eee;
    color: #169bd5;
  }

  .cred {
    background-color: #ff0000;
    color: #fef0f0;
  }
}

page {
  background: #f8f9fc;
}
</style>
